<template>	
	<div class="classic-case">
		<div class="btn-left"><img src="@/assets/images/buildHouse/left_arrow.png" alt="" @click="onPrev()"></div>
	  <el-carousel ref="carouselRef" class="carousel" :autoplay="true" :interval="3000" indicator-position="outside" arrow="never" height="280px" v-if="listData[0]">
	    <el-carousel-item v-for="item in listData" :key="item">
	      <img class="banner-img" :src="item.imgUrl" :alt="item">
	      <p class="fontStyle p1">工程名称：{{item.name}}</p>
	      <p class="fontStyle p2">工程地址：{{item.location}}</p>
	      <p class="fontStyle p3"><span>工程类别：{{item.category}}</span><span style="margin-left: 50px;">工程类型：{{item.type}}</span></p>	      
	    </el-carousel-item>	  
	  </el-carousel>
	  <div class="btn-right"><img src="@/assets/images/buildHouse/right_arrow.png" alt="" @click="onNext()"></div>  
	</div>
</template>
<script setup>
import * as echarts from 'echarts'
import { getTypicalCase } from '@/api/buildHouse.js';
// 轮播图对象
const carouselRef = ref();
const listData = ref([]);
// 上一张
const onPrev = () => {
    carouselRef.value.prev();
}
// 下一张
const onNext = () => {
    carouselRef.value.next();
}
const getData = () => {
	getTypicalCase().then((res) => {
		//console.log(res.data)
		listData.value = res.data;
    listData.value.map(item=>{
    	item.imgUrl = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(item.url)
    	if(item.type == "0"){
    		item.type = "加固工程"
    	}else if(item.type == "1"){
    		item.type = "新建工程"
    	}
    	if(item.category == "0"){
    		item.category = "大中小学校"
    	}else if(item.category == "1"){
    		item.category = "城镇住宅"
    	}else if(item.category == "2"){
    		item.category = "医院"
    	}else if(item.category == "3"){
    		item.category = "危险化学品厂"
    	}else if(item.category == "4"){
    		item.category = "电信网络"
    	}else if(item.category == "5"){
    		item.category = "电力网络"
    	}else if(item.category == "6"){
    		item.category = "农村居民"
    	}else if(item.category == "7"){
    		item.category = "重要交通生命线"
    	}else if(item.category == "8"){
    		item.category = "应急避难场所"
    	}else if(item.category == "9"){
    		item.category = "水库大坝"
    	}else if(item.category == "10"){
    		item.category = "其他"
    	}
    })
  });
}
getData();
//onMounted(() => {
//
//})

</script>
<style lang='scss' scoped>
.classic-case{
	position: relative;
}
.btn-left{
	position: absolute;
	top: 60px;
	left: 40px;
	z-index: 99;
	cursor: pointer;
}
.btn-right{
	position: absolute;
	top: 60px;
	right: 40px;
	z-index: 99;
	cursor: pointer;
}
.el-carousel {
    margin-top: 20px;

    :deep(.el-carousel__item) {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .banner-img {
            height: 150px;
            width: 250px;
        }
        .fontStyle{
        	height: 16px;
        	font-size: 16px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
        }
        .p1{
        	position: absolute;       	
	        top:150px;
		      left: 20px;
        }
        .p2{
        	position: absolute;       	
	        top:180px;
		      left: 20px;
        }
        .p3{
        	position: absolute;       	
	        top:210px;
		      left: 20px;
        }
        .p4{
        	font-size: 14px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #46FFFF;
					text-decoration-line: underline;
				  text-decoration-skip-ink: none;
				  text-underline-position: under;
					padding-bottom: 4px; /* 调整下划线距离字体的距离 */	
					cursor: pointer;	
        	position: absolute;       	
	        top:240px;
		      left: 20px;
        }
    }
}
// 指示器
:deep(.el-carousel__indicators) {
    padding: 0;
    display: flex;
    justify-content: center;

    .el-carousel__indicator {
        margin: 0 5px;

        .el-carousel__button {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #418DFD;
            cursor: pointer;
        }

        &.is-active {
            .el-carousel__button {
                background: #46FFFF;
                box-shadow: 0px 0px 6px 1px #46FFFF;
            }
        }
    }
}
</style>